<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryFormRef" v-show="showSearch" :inline="true" label-width="70px">
			<el-form-item label="房产名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入房产名称" clearable style="width: 240px"
					@keyup.enter.native="handleQuery()" />
			</el-form-item>

			<form-search @reset="resetQuery()" @search="handleQuery()" />
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="plus" size="small" @click="handleAdd"
					v-hasPermi="['system:house:add']">新增</el-button>
			</el-col>

			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>

		<el-table stripe border ref="pageTable" v-loading="loading" :data="roleList"
			@selection-change="handleSelectionChange">
			<!-- prettier-ignore -->
			<el-table-column label="名称" prop="name" :show-overflow-tooltip="true" width="200" />
			<el-table-column label="区域" prop="region" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText("region", scope.row.region) }}
				</template>
			</el-table-column>
			<el-table-column label="城市" prop="city" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="所在地" prop="location" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="售价" prop="price" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="底价" prop="basePrice" :show-overflow-tooltip="true" width="100" />
			<!-- prettier-ignore -->
			<el-table-column label="类型" prop="type" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText('type', scope.row.type) }}
				</template>
			</el-table-column>
			<el-table-column label="房盘类型" prop="roomType" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText("roomType", scope.row.roomType) }}
				</template>
			</el-table-column>
			<el-table-column label="用途" prop="purpose" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText("purpose", scope.row.purpose) }}
				</template>
			</el-table-column>
			<el-table-column label="来源" prop="source" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText("source", scope.row.source) }}
				</template>
			</el-table-column>
			<!-- prettier-ignore -->
			<el-table-column label="状态" prop="state" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{ getOptionsText('state', scope.row.state) }}
				</template>
			</el-table-column>

			<el-table-column label="楼层" prop="floor" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="房号" prop="roomNum" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="户型" prop="houseType" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="朝向" prop="face" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="构造" prop="structure" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="土地面积" prop="landArea" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="建筑面积" prop="buildingArea" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="建筑年月" prop="buildingDate" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="车位情况" prop="parkingSituation" :show-overflow-tooltip="true" width="100" />
			<el-table-column label="房屋现状" prop="housingStatus" :show-overflow-tooltip="true" width="100">
				<template #default="scope">
					{{
						getOptionsText("housingStatus", scope.row.housingStatus)
					}}
				</template>
			</el-table-column>
			<!-- prettier-ignore -->
			<el-table-column label="备注信息" prop="remark" width="150" />

			<el-table-column label="操作" align="center" width="200" fixed="right">
				<template #default="scope">
					<el-link class="el-link-spacing" :underline="false" size="small" type="primary" icon="edit"
						@click="handleUpdate(scope.row)" v-hasPermi="['system:house:edit']"><span
							class="table_link_text">修改</span></el-link>
					<el-link class="el-link-spacing" :underline="false" size="small" type="primary" icon="view"
						@click="handleUpdate(scope.row, true)" v-hasPermi="['system:house:query']"><span
							class="table_link_text">查看</span></el-link>
					<el-link class="el-link-spacing" :underline="false" size="small" type="danger" icon="delete"
						@click="handleDelete(scope.row)" v-hasPermi="['system:house:remove']"><span
							class="table_link_text">删除</span></el-link>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />

		<el-dialog :title="title" v-model="open" width="60%" append-to-body @close="cleanSelect()">
			<el-form ref="formRef" :model="form" :rules="rules" class="form-inline" label-width="100px">
				<el-form-item label="名称" required prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="封面图" required>
					<el-upload class="avatar-uploader" action="#" :show-file-list="false"
						:http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl || copyMainImage" :src="imageUrl || copyMainImage" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="附件" required>
					<el-upload :file-list="filesData" style="width: 100%" class="upload-demo" drag action="#" multiple
						:http-request="handleFileSuccess">
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
						<div class="el-upload__text">
							拖拽文件到这里或者 <em>点击上传</em>
						</div>
						<template #tip>
							<div class="el-upload__tip">文件大小不超过5M</div>
						</template>
					</el-upload>
				</el-form-item>
				<el-form-item label="区域" required prop="region">
					<el-select v-model="form.region" @change="dataScopeSelectChange">
						<el-option v-for="item in regionOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="城市" required prop="city">
					<el-input v-model="form.city" />
				</el-form-item>
				<el-form-item label="所在地" required prop="location">
					<el-input v-model="form.location" />
				</el-form-item>
				<el-form-item label="售价" required prop="price">
					<el-input type="number" v-model="form.price" />
				</el-form-item>
				<el-form-item label="底价" required prop="basePrice">
					<el-input type="number" v-model="form.basePrice" />
				</el-form-item>
				<el-form-item label="类型" required prop="type">
					<el-select v-model="form.type" @change="dataScopeSelectChange">
						<el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房盘类型" required prop="roomType">
					<el-select v-model="form.roomType" @change="dataScopeSelectChange">
						<el-option v-for="item in roomTypeOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用途" required prop="purpose">
					<el-select v-model="form.purpose" @change="dataScopeSelectChange">
						<el-option v-for="item in purposeOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="来源" required prop="source">
					<el-select v-model="form.source" @change="dataScopeSelectChange">
						<el-option v-for="item in sourceOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" required prop="state">
					<el-select v-model="form.state" @change="dataScopeSelectChange">
						<el-option v-for="item in stateOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="楼层" required prop="floor">
					<el-input v-model="form.floor" />
				</el-form-item>
				<el-form-item label="房号" required prop="roomNum">
					<el-input v-model="form.roomNum" />
				</el-form-item>
				<el-form-item label="户型" required prop="houseType">
					<el-input v-model="form.houseType" />
				</el-form-item>
				<el-form-item label="朝向" required prop="face">
					<el-input v-model="form.face" />
				</el-form-item>
				<el-form-item label="构造" required prop="structure">
					<el-input v-model="form.structure" />
				</el-form-item>
				<el-form-item label="土地面积" required prop="landArea">
					<el-input type="number" v-model="form.landArea" />
				</el-form-item>
				<el-form-item label="建筑面积" required prop="buildingArea">
					<el-input type="number" v-model="form.buildingArea" />
				</el-form-item>
				<el-form-item label="建筑年月" required prop="buildingDate">
					<el-date-picker v-model="form.buildingDate" type="date" placeholder="选择建筑年月" v />
				</el-form-item>
				<el-form-item label="车位情况" required prop="parkingSituation">
					<el-input v-model="form.parkingSituation" />
				</el-form-item>
				<el-form-item label="房屋现状" required prop="housingStatus">
					<el-select v-model="form.housingStatus" @change="dataScopeSelectChange">
						<el-option v-for="item in housingStatusOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋描述" required prop="remark">
					<el-input style="width: 200%" v-model="form.remark" :rows="4" type="textarea" />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button v-if="!isSee" type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Role" setup>
import House from "@/api/request/house";
import { useDictDataOptions } from "@/hooks/useDictDataOptions";
import FileUpload from "@/components/FileUpload/index.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
	response,
	uploadFile
) => {
	console.log(response, uploadFile);
	imageUrl.value = URL.createObjectURL(response.file);
	mainImage.value = response;
};

const handleFileSuccess = (response: any, uploadFile: any) => {
	console.log(response, uploadFile);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
	if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
		ElMessage.error("请上传png或者jpg格式!");
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("Avatar picture size can not exceed 2MB!");
		return false;
	}
	return true;
};
const {
	getOptionsText,
	regionOptions,
	sourceOptions,
	purposeOptions,
	roomTypeOptions,
	typeOptions,
	stateOptions,
	housingStatusOptions,
} = useDictDataOptions();

// prettier-ignore
const {
	menuRef, loading, exportLoading, deptRef, single, multiple, showSearch, total, roleList, title, open, openDataScope, menuExpand, menuNodeAll,
	deptExpand, deptNodeAll, dateRange, statusOptions, dataScopeOptions, menuOptions, deptOptions, queryParams, form, defaultProps, rules, formRef,
	queryFormRef, getList, handleStatusChange, handleQuery, resetQuery, handleSelectionChange, handleCheckedTreeExpand,
	handleCheckedTreeNodeAll, handleCheckedTreeConnect, handleAdd, handleUpdate, dataScopeSelectChange, submitForm, cleanSelect,
	submitDataScope, handleDelete, pageTable, checkSelected, isSee, filesData, mainImage, copyMainImage, copyFilesData
} = House();
</script>
<style lang="scss">
.form-inline .el-input {
	width: 100%;
}

.form-inline .el-select {
	width: 100%;
}

.form-inline {
	.el-form-item__label {
		font-weight: 700;
	}
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
